/*
* @Date: 2021/1/17
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import { Form, Input, Switch, Select, Button, InputNumber } from 'antd';
import Icon from 'components/Icon';
import './index.scss';

const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 }
}
export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      funKey: '',
    };
    // XUE.win.addEventListener('ipc:code:save', (args) => {
    //   const { uid } = this.props;
    //   const { funKey = '' } = this.state;
    //   const { name, arg, content } = args;
    //   if (!window.functions) {
    //     window.functions = {};
    //   }
    //   window.functions[uid] = {
    //     name,
    //     args: arg,
    //     content,
    //     funKey,
    //   };
    // });
  }

  onPropsChange = (key, value) => {
    const { onChange, component, uid } = this.props;
    const descriptions = window.descriptions || {};
    onChange && onChange({
      key,
      value,
      component,
      uid,
    });
    if (descriptions[component]) {
      const { props = [] } = descriptions[component];
      const propIndex = props.findIndex(vo => vo.key === key);
      if (propIndex >= 0) {
        const prop = props[propIndex];
        if (prop.callback) {
          prop.callback(document.getElementById(uid), value);
        }
      }
    }
  }

  onFileUpload = (key) => {
    // const win = remote.getCurrentWindow();
    // const directory = remote.dialog.showOpenDialogSync(
    //   win,
    //   {
    //     properties: ['openFile'],
    //     filters: [{
    //       name: 'Images',
    //       extensions: ['jpg', 'png'],
    //     },]
    //   }
    //   );
    const { onChange, component, uid } = this.props;
    onChange && onChange({
      key,
      value: directory,
      component,
      uid,
    });
  }

  onCodeEdit = (key) => {
    const win = remote.getCurrentWindow();
    // XUE.win.openWin({
    //   path: 'http://localhost:8099/code.html',
    //   winConfig: {
    //     parent: win.winId,
    //     modal: true,
    //     frame: false,
    //     show: false,
    //     width: 500,
    //     height: 800,
    //     disableHtmlFullscreenWindowResize: true,
    //     resizable: true,
    //     webPreferences: {
    //       nodeIntegration: true,
    //     },
    //   },
    // });
    this.setState({
      funKey: key,
    });
    setTimeout(() => {
      const { component, uid } = this.props;
      const descriptions = window.descriptions || {};
      const functions = window.functions || {};
      if (descriptions[component]) {
        const { props = [] } = descriptions[component];
        const propIndex = props.findIndex(vo => vo.key === key);
        if (propIndex >= 0) {
          const prop = props[propIndex];
          // if (functions[uid]) {
          //   XUE.win.emit('ipc:code:init', functions[uid], win.winId);
          // } else {
          //   if (prop.function) {
          //     XUE.win.emit('ipc:code:init', {
          //       name: '函数名称',
          //       args: prop.function,
          //       content: '',
          //     }, win.winId);
          //   }
          // }
        }
      }
    }, 1000);
  }

  onLink = (key, type) => {
    const { onChange, component, uid } = this.props;
    // 弹出参数链接窗口
    const dialog = XUE.showDialog({
      title: '属性链接',
      onCancel: () => dialog.close()
    }, (
      <div>Hello World</div>
    ))
  }

  render() {
    const descriptions = window.descriptions || {};
    const { component, propsValue } = this.props;
    if (!descriptions[component]) {
      return (
        <div className="props-no-data">
          暂无属性
        </div>
      );
    }
    const { props = [] } = descriptions[component];
    return (
      <div className="props-form-box">
        <Form>
          {
            props.map(vo => {
              return (
                <Form.Item
                  label={vo.label}
                  { ...formItemLayout }
                >
                  {
                    vo.type === 'select' && (
                      <React.Fragment>
                        <Select
                          value={propsValue[vo.key]}
                          onChange={(value) => this.onPropsChange(vo.key, value)}
                        >
                          {
                            vo.options.map(item =>
                              (<Select.Option
                                  value={item === 'false' ? false : item === 'true' ? true : item }
                                >
                                  {item}
                                </Select.Option>
                              ))
                          }
                        </Select>
                        <Icon type="line1" onClick={() => this.onLink(vo.key)} />
                      </React.Fragment>
                    )
                  }
                  {
                    vo.type === 'boolean' && (
                      <React.Fragment>
                        <Switch
                          defaultChecked ={propsValue[vo.key]}
                          size="small"
                          onChange={checked => this.onPropsChange(vo.key, checked)}
                        />
                        <Icon type="line1" onClick={() => this.onLink(vo.key, 'bool')} />
                      </React.Fragment>
                    )
                  }
                  {
                    vo.type === 'color' && (
                      <React.Fragment>
                        <input
                          type="color"
                          value={propsValue[vo.key]}
                          onChange={e => this.onPropsChange(vo.key, e.target.value)}
                        />
                        <Icon type="line1" onClick={() => this.onLink(vo.key, 'bool')} />
                      </React.Fragment>
                    )
                  }
                  {
                    vo.type === 'function' && (
                      <Button size="small" onClick={(e) => this.onCodeEdit(vo.key)}>代码编辑</Button>
                    )
                  }
                  {
                    vo.type === 'string' && (
                      <React.Fragment>
                        <Input value={propsValue[vo.key]} onChange={e => this.onPropsChange(vo.key, e.target.value)} />
                        <Icon type="line1" onClick={() => this.onLink(vo.key)}/>
                      </React.Fragment>

                    )
                  }
                  {
                    vo.type === 'number' && (
                      <React.Fragment>
                        <InputNumber defaultValue={propsValue[vo.key]} onChange={value => this.onPropsChange(vo.key, value)} />
                        <Icon type="line1" onClick={() => this.onLink(vo.key, 'number')}/>
                      </React.Fragment>

                    )
                  }
                  {
                    vo.type === 'upload' && (
                      <Input
                        defaultValue={propsValue[vo.key]}
                        addonAfter={
                          <Icon
                            type="folder"
                            onClick={() => this.onFileUpload(vo.key)}
                          />
                        }
                      />
                    )
                  }
                </Form.Item>
              )
            })
          }
        </Form>
      </div>
    );
  }
}
